<template>
    <!-- 对话框，用于选择字体库 -->
    <el-dialog title="选择字体库" v-model="dialogVisible" style="width: 40%;">
      <!-- 滚动条，用于在字体库较多时进行滚动 -->
      <el-scrollbar max-height="100px" class="no-horizontal-scroll">
        <!-- 字体库列表 -->
        <el-row :gutter="20" type="flex" align="middle" justify="start">
          <el-col :span="6" v-for="font in fonts" :key="font.value">
            <!-- 字体库按钮 -->
            <el-button type="text" @click="selectFont(font.value)">{{ font.label }}</el-button>
          </el-col>
        </el-row>
      </el-scrollbar>
    </el-dialog>
  </template>
   
  <script setup lang="ts">
  import { ref } from 'vue';
  
  // 字体库数据
  const fonts = [
    { label: '字体库A', value: 'fontA' },
    { label: '字体库B', value: 'fontB' },
    // ... 更多字体库数据
  ];
  
  // 对话框的显示状态
  const dialogVisible = ref(false);
  
  // 选中的字体库
  const selectedFont = ref('');
  
  // 创建事件发射器
  const emit = defineEmits(['selectedFont']);
  
  // 显示对话框
  function openDialog() {
    dialogVisible.value = true;
  }
  
  // 选择字体库
  function selectFont(fontValue) {
    selectedFont.value = fontValue;
    console.log('选中的字体库:', selectedFont.value);
    dialogVisible.value = false;
    emit('selectedFont', selectedFont.value);
  }
  
  // 导出组件方法
  defineExpose({
    openDialog,
  });
  </script>
  
  <style scoped>
  /* 隐藏水平滚动条 */
  .no-horizontal-scroll ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden !important;
  }
  
  .no-horizontal-scroll ::v-deep .el-scrollbar__view {
    overflow-x: hidden !important;
  }
  
  .no-horizontal-scroll ::v-deep .el-scrollbar__bar.is-horizontal {
    display: none !important;
  }
  </style>